import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
import styles from '@/assets/css/order.module.css';

const OrderIndex = () => {
    let navigate = React.Router.useNavigate();
    let [active, SetActive] = React.useState('all')
    let [list, SetList] = React.useState<any>([])
    let [hasMore, SethasMore] = React.useState(false)

    React.useEffect(() => {
        GetOrderData()
    }, [])
    //选项卡切换
    const TabChange = async (key: string) => 
    {
        SetActive(key)

        await sleep(1000)
        await OnRefresh()
    }

    //下拉刷新
    const OnRefresh = async () =>
    {
        SethasMore(true);
        SetList([]);

        await sleep(1000);
        await GetOrderData();
    };

    //上拉加载
    const LoadMore = async () => 
    {
        await sleep(1000)
        GetOrderData()
    }

    //请求数据的方法
    const GetOrderData = async () =>
    {

        let data = [
            {
                id: 1,
                room: {
                    name: "暑假特价房",
                    thumb_text: 'hotel1.jpg',
                },
                status_text: '已支付',
                price: '999.00',
                status: '1',
                starttime_text: "2024-11-28",
                startday_text: '星期五',
                endtime_text: "2024-12-05",
                endday_text: '星期六',
                order_day: 7,
                rate: '5'
            },
            {
                id: 2,
                room: {
                    name: "总统套房",
                    thumb_text: 'hotel2.jpg',
                },
                status_text: '待评价',
                price: '888.00',
                status: '3',
                starttime_text: "2024-11-28",
                startday_text: '星期四',
                endtime_text: "2024-12-05",
                endday_text: '星期六',
                order_day: 11,
                rate: null
            }
        ]

        SethasMore(false)
        SetList([...list, ...data]);
    }

     // 按钮结构
    const ButtonList = (order:any) => 
    {
        if(order.status == '3' && !order.rate) //未支付
        {
            return (
                <React.UI.Button color='warning' size='small' onClick={() => navigate(`/order/rate?orderid=${order.id}`)}>立即评价
                </React.UI.Button>
            )
        }
        else if(order.status == 1) //已支付
        {
            return (
              <React.UI.Button color='danger' size='small'>申请退款</React.UI.Button>
            )
        }
    }
    return (
        <>
            {/* 选项卡切换 */}
            <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
                <React.UI.Tabs.Tab title="全部" key="all" />
                <React.UI.Tabs.Tab title="未支付" key="0" />
                <React.UI.Tabs.Tab title="已支付" key="1" />
                <React.UI.Tabs.Tab title="已入住" key="2" />
                <React.UI.Tabs.Tab title="已退房" key="3" />
                <React.UI.Tabs.Tab title="申请退款" key="-1" />
            </React.UI.Tabs>

            {/* 下拉刷新列表 */}
            <React.UI.PullToRefresh onRefresh={OnRefresh}>
                {/* 订单列表 */}
                <div className={styles.order_list}>
                    {list && list.map((item: any, key: number) =>
                        <div className={styles.item} key={key}>
                            <div className={styles.item_top}>
                                <p>{item.room.name}</p>
                                <div className={styles.top_tag}>{item.status_text}</div>
                            </div>

                            <div className={styles.house}>
                                <div className={styles.item_swipers}>
                                    <img src={require(`@/assets/images/${item.room.thumb_text}`)} alt="" />
                                </div>
                                <div className={styles.item_times}>
                                    <div>
                                        <div>{item.starttime_text}</div>
                                        <div>{item.startday_text}</div>
                                    </div>
                                    <div>
                                        <div>共{item.order_day}晚</div>
                                        <div className={styles.item_right}>
                                            <img src={require("@/assets/images/right1.png")} alt="" />
                                        </div>
                                    </div>
                                    <div>
                                        <div>{item.endtime_text}</div>
                                        <div>{item.endday_text}</div>
                                    </div>
                                    <div>
                                        <div className={styles.item_pay}>订单总价</div>
                                        <div className={styles.item_price}>￥{item.price}</div>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.item_bar}>
                                
                                {ButtonList(item)}

                                <React.UI.Button color='primary' size='small' onClick={() => navigate(`/order/info?orderid=${item.id}`)}>查看详情
                                </React.UI.Button>
                            </div>
                        </div>
                    )}
                </div>

                {/* 上拉加载 */}
                <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
            </React.UI.PullToRefresh>
        </>
    )
}

export default OrderIndex;